<template>
  <div class="fullscreen per_login">
	<div v-transfer-dom>
    <loading :show="isLoading" text="数据加载中..."></loading>
  </div>
	<div v-if="!isLoading">
		<div class="operate_Bar1 clearfix" >

			<div class="text">登录</div>

		</div>
		<section class="inner_content">

			<form id="loginform" name="loginform"  @submit.prevent="onSubmit">

				<li class="username"><x-input name="mobile" placeholder="请输入手机号码"  v-model="phone"  style="padding:0px;"></x-input></li>

				<li class="pwd"><x-input v-model="password" type="password" placeholder="输入密码" :equal-with="password" style="padding:0px;"></x-input></li>

				<li class="login_free">
						<!-- <div><input type="checkbox" value="ok" name="m.zidong" id="login_auto" checked="checked"><label for="login_auto">30天内自动登录</label></div> -->
				</li>

				<li class="submit_btn"><button type="submit" id="login_btn" >绑定</button></li>

			</form>
		</section>
	</div>
</div>
</template>
<script>
import {XInput,Loading,TransferDomDirective as TransferDom } from 'vux'
import _ from 'lodash'
//设置缓存 
import {setStore,getStore,removeStore,getUrlParam} from '@/config/mUtils'
import {loginUrl,appId} from '@/config/config'
import { mapGetters,mapActions } from 'vuex'
import store from 'store/store'

export default {
  name: 'login',
	directives: {
    TransferDom
  },
  components: {
    XInput,
		Loading,
  },
	data(){
		return{
			phone: '',
			password: '',
			isLoading: false
		}
	},
	computed:{
		...mapGetters([
			'getWxCode'
		])
	},
	beforeRouteEnter(to,from,next){
		if(getStore('wxcode')){
			removeStore('wxcode')
			if(getStore('nickname')){
				removeStore('nickname')
			}
			if(getStore('avatar')){
				removeStore('avatar')
			}
			if(getStore('bindMobile')){
				removeStore('bindMobile')
			}
			var Code=getUrlParam('code');
      if(Code){
        store.dispatch('setWxCode',Code)
        next()
      }else{
        window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(loginUrl)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
        next()
      }
		}else{
			var Code=getUrlParam('code');
      if(Code){
        store.dispatch('setWxCode',Code)
        next()
      }else{
        window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(loginUrl)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
        next()
      }
		}
	},
	created(){
		this.phone = '';
		this.password = '';
		// if(!getStore('shop')){
			if(this.getWxCode){
				this.isLoading = true
				this.$http.get(`merchat/code/${this.getWxCode}/wxBinded`)
					.then(({data})=>{
						if(data.status === '200'){
							this.isLoading = false
							this.setShopBindStatus(data.data.hasBind)
							setStore('shop',JSON.stringify(data.data))
							if(data.data.hasBind === 1){
								return this.$router.replace({path:'/shop/order'})
							}else if(data.data.hasBind === 0){
								return this.$router.replace({path:'/login'})
							}
						}
					}).catch(err=>{
						this.isLoading = false
						if(err.data.status === '10000'){
							this.$vux.toast.show({
								type: 'warn',
								text: err.data.msg,
								time: 2000
							});
							setTimeout(()=>{
								window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(loginUrl)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
							},1000)
						}else{
							this.isLoading = false
							this.$vux.toast.show({
								type: 'warn',
								text: err.data.msg,
								time: 2000
							});
							// setTimeout(()=>{
							// 	window.location.href= `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(loginUrl)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
							// },1000)
						}
				});
			}
		// }else if(JSON.parse(getStore('shop')).hasBind ===1){
		// 	return this.$router.replace({path:'/shop/order'})
		// }
		
	},
	methods:{
		...mapActions([
			'setShopBindStatus'
		]),
		onSubmit(){
			if(this.isPhone(this.phone) && this.isEmpty(this.password)){
				// let data = Object.assign({},{username:this.phone,password:this.password})
				if(this.password.length >= 6){
					this.$http.post(`merchat/bindWx?username=${this.phone}&password=${this.password}&openId=${JSON.parse(getStore('shop')).openId}`)
						.then(({data})=>{
							if(data.status === '200'){
								if(data.data.openId){
										this.setShopBindStatus(data.data.hasBind)
										setStore('shop',JSON.stringify(data.data))
										this.$router.replace({path:'/shop/order'})
								}
							}
						}).catch(err=>{
							if(err.data.status === '10000'){
								this.$vux.toast.show({
									type: 'warn',
									text: err.data.msg,
									time: 2000
								});
							}else{
								this.$vux.toast.show({
									type: 'warn',
									text: err.data.msg,
									time: 2000
								});
							}
						});
				}else{
					this.$vux.toast.show({
						type: 'warn',
						text: '密码长度需要大于6个字符',
						time: 2000
					})
				}
			}
		},
		//验证手机号码和是否为空
		isPhone(phone){
			// let reg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/
			if(!_.trim(phone)){
				this.$vux.toast.show({
					type: 'warn',
					text: '账号不能为空',
					time: 2000
				})
			}else{
				return true;
			}
			// else{
			// 	if(!reg.test(phone)){
			// 		this.$vux.toast.show({
			// 			type: 'warn',
			// 			text: '手机号码不正确',
			// 			time: 2000
			// 		})
			// 	}else{
			// 		return true
			// 	}
			// }
		},
		isEmpty(password){
			if(!_.trim(password)){
				this.$vux.toast.show({
					type: 'warn',
					text: '密码不能为空',
					time: 2000
				})
			}else{
				return true
			}
		} 
	}
}
</script>
<style scoped>
/* public */
.fullscreen{margin:0 auto;background:#fff;overflow:hidden;position:relative;}
.clearfix:after{display:block; content:''; clear:both; visibility:hidden; height:0;}
.clearfix{*zoom:1;}
ul,ol,li{list-style:none}
.operate_Bar1{height:45px; line-height:45px; background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#F8F8F8)); font-size:14px;padding:0 70px; border-bottom:1px solid #E4E4E4; position:relative;}
.operate_Bar1 .text{text-align:center; color:#333; font-size:16px;}
/* login */
.per_login section{padding:35px 20px; font-size:14px;}



.per_login .username,

.per_login .pwd{padding:0 5px;}



.per_login .username,.per_login .pwd{-webkit-appearance:none; width:100%; height:18px; line-height:18px; padding:11px 5px; display:block; border-radius:5px; border:1px solid #C9C9C9; border-bottom-left-radius:0; border-bottom-right-radius:0; margin-left:-5px;}

.per_login .pwd{border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:0; border-top-right-radius:0; border-top:0; box-shadow:0 1px 1px #E5E5E5;}



.per_login .login_free{height:50px; line-height:50px;}

.per_login .login_free div{height:18px; line-height:18px; display:inline-block; position:relative; padding-left:3px;}

.per_login .login_free input[type="checkbox"]{position:absolute; top:0; left:0; opacity:0; width:18px; height:18px;}

/* .per_login .login_free label{height:18px; line-height:18px; padding-left:22px; background:url(../../Touch_img/icon1.png) no-repeat 0 -74px; background-size:150px 150px; display:block;} */

.per_login .login_free input:checked + label{background-position:0 -99px;}



.per_login button{border-radius:2px; width:100%; background:#289ED7; border:0; height:38px; line-height:38px; font-size:16px; color:#FFF;}



.per_login .reg_findPwd{padding-top:20px; text-align:right;}

.per_login .reg_findPwd a:visited{color:#1155CD;}

.per_login .reg_findPwd a:last-child{margin-left:20px;}
</style>
